<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../index.js"></script>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        canvas {
            margin: 50px auto 0;
            display: block;
        }
    </style>
</head>
<body>
<canvas id="canvas" width="400" height="400">
    此浏览器不支持canvas
</canvas>
</body>
</html>
<script>
    const ctx = document.getElementById('canvas')
    const gl = ctx.getContext('webgl')

    const VERTEX_SHADER_SORUCE = `
    attribute vec4 aPosition;
    varying vec4 vPosition;
    void main(){
      vPosition=aPosition;
      gl_Position = aPosition;
      gl_PointSize = 10.0;
    }
  `;
    const FRAGEMNT_SHADER_SOURCE = `
    precision lowp float;
    uniform float uHeight;
    varying vec4 vPosition;
    void main(){
    // 向上卷出 vPosition.y > uHeight  uHeight 的取值范围 -1.0 1.0
    // 向下卷出 vPosition.y < uHeight  uHeight 的取值范围 -1.0 1.0
    // 向左卷出 vPosition.x < uHeight  uHeight 的取值范围 -1.0 1.0
    // 向右卷出 vPosition.x > uHeight  uHeight 的取值范围 -1.0 1.0

    // 左下 - 右上 vPosition.y > uHeight && vPosition.x > uHeight
        if(vPosition.y > uHeight && vPosition.x > uHeight){
            gl_FragColor = vec4(1.0,0.0,0.0,1.0);
        }else{
            gl_FragColor = vec4(1.0,0.0,0.0,0.0);
        }
    }
  `;
    // 封装后
    const program = initShader(gl, VERTEX_SHADER_SORUCE, FRAGEMNT_SHADER_SOURCE)
    const aPosition = gl.getAttribLocation(program, 'aPosition')
    const uHeight = gl.getUniformLocation(program, 'uHeight')
    // 顶点数据
    const points = new Float32Array([
        -1.0, -1.0,
        1.0, -1.0,
        -1.0, 1.0,
        1.0, 1.0,
    ])
    const buffer = gl.createBuffer();

    gl.bindBuffer(gl.ARRAY_BUFFER, buffer)

    gl.bufferData(gl.ARRAY_BUFFER, points, gl.STATIC_DRAW)

    gl.vertexAttribPointer(aPosition, 2, gl.FLOAT, false, 0, 0)
    // 激活aPosition
    gl.enableVertexAttribArray(aPosition)


    let value = -1
    // let value = 1

    function run() {
        value += 0.01;
        // value -= 0.01;

        gl.uniform1f(uHeight, value)
        gl.drawArrays(gl.TRIANGLE_STRIP, 0, 4);

        requestAnimationFrame(run)
    }

    run()
</script>
